// showAlertDialog.tsx
import React, { useState, useEffect, ReactNode } from 'react'
import ReactDOM from 'react-dom/client'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
// import { Button } from '@/components/ui/button'
import { VisuallyHidden } from '@radix-ui/react-visually-hidden' // 确保安装了该包

// 定义函数参数的接口
interface ShowAlertDialogOptions {
  title?: ReactNode
  description?: ReactNode
  cancelText?: ReactNode
  confirmText?: ReactNode
  onConfirm?: () => void
  onCancel?: () => void
  children?: ReactNode
}

/**
 * 显示一个 AlertDialog 对话框
 * @param options - 配置选项
 */
export function showAlertDialog(options: ShowAlertDialogOptions): void {
  const {
    title,
    description,
    cancelText,
    confirmText,
    onConfirm,
    onCancel,
    children,
  } = options

  // 创建一个容器 div 并添加到 body
  const container = document.createElement('div')
  document.body.appendChild(container)

  // 使用 React 18 的 createRoot API
  const root = ReactDOM.createRoot(container)

  // 定义一个包装组件来管理对话框的状态
  const DialogWrapper: React.FC = () => {
    const [open, setOpen] = useState<boolean>(true)

    // 当对话框关闭时，卸载组件并移除容器
    useEffect(() => {
      if (!open) {
        setTimeout(() => {
          root.unmount()
          container.remove()
        }, 0)
      }
    }, [open])

    return (
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            {/* 始终渲染 AlertDialogTitle，使用 VisuallyHidden 隐藏无标题时 */}
            {title ? (
              typeof title === 'string' ? (
                <AlertDialogTitle>{title}</AlertDialogTitle>
              ) : (
                <AlertDialogTitle>{title}</AlertDialogTitle>
              )
            ) : (
              <VisuallyHidden>
                <AlertDialogTitle>无标题</AlertDialogTitle>
              </VisuallyHidden>
            )}
            {/* 仅在 description 为字符串时使用 AlertDialogDescription */}
            {description && typeof description === 'string' ? (
              <AlertDialogDescription>{description}</AlertDialogDescription>
            ) : null}
          </AlertDialogHeader>
          {/* 如果 description 不是字符串，作为 children 渲染 */}
          {description && typeof description !== 'string' && (
            <div className="mb-4">{description}</div>
          )}
          {/* 渲染额外的自定义内容 */}
          {children}
          {(cancelText || confirmText) && (
            <AlertDialogFooter>
              {cancelText && (
                <AlertDialogCancel
                  onClick={() => {
                    if (onCancel) {
                      onCancel()
                    }
                    setOpen(false)
                  }}
                >
                  {cancelText}
                </AlertDialogCancel>
              )}
              {confirmText && (
                <AlertDialogAction
                  onClick={() => {
                    if (onConfirm) {
                      onConfirm()
                    }
                    setOpen(false)
                  }}
                >
                  {confirmText}
                </AlertDialogAction>
              )}
            </AlertDialogFooter>
          )}
        </AlertDialogContent>
      </AlertDialog>
    )
  }

  // 渲染包装组件
  root.render(<DialogWrapper />)
}

export const alterDialog = showAlertDialog
